<template>
  <div>
    <vue-hash-calendar :visible.sync="isShowCalendar" format="YY-MM-DD" @change="calendarChange"></vue-hash-calendar>
    <van-divider />
    <div class="p15">
      <h3 v-if="total == 0">今日暂无直播</h3>
      <h3 v-else>今日有{{ total }}场直播</h3>
      <div class="zhibo" v-for="(item, index) in list" :key="index">
        <div class="time">
          <i></i>
          {{ item.beg_time }}
          <span>{{ parseStatus(item.status) }}</span>
        </div>
        <h3 class="textoverflow1">{{ item.name }}</h3>
        <div class="teacher">
          <div>主讲：{{ item.teacher_name }}</div>
          <!-- <div>
            <van-button v-if="item.paper_id" @click.stop class="collapse_button">课后练习</van-button>
            <van-button
              v-if="item.preview_url"
              @click.stop="toPreviewUrl(item.preview_url)"
              class="collapse_button"
            >预习课件</van-button>
          </div>-->
        </div>
      </div>
    </div>
    <!-- <div class="headline" style="padding-top: 10px">
      <span class="headline_ico"></span>
      <span class="headline_title">热门推荐</span>
    </div>
    <div class="headline_three main clearfix">
      <van-list :loading="loading" :finished="finished" finished-text="我也是有底线的" @load="onLoad">
        <div
          class="headline_three_banxing"
          v-for="(item, index) in hotGoodsList"
          :key="index"
          @click="topackDetails2(item)"
        >
          <div class="banxing">
            <div class="imgs">
              <img v-lazy="item.cover" alt />
            </div>
            <div>
              <div class="banxing_title">{{ item.name }}</div>
              <div class="banxing_button">
                抢购价:
                <span>
                  <i style="font-size: 12px">¥</i>
                  <i>{{ item.price }}</i>
                </span>
              </div>
              <div v-if="item.orig_price != '0.00'" class="banxing_zhixun">
                原 价:
                <span>
                  <i style="font-size: 12px">¥</i>
                  <i>{{ item.orig_price }}</i>
                </span>
              </div>
            </div>
          </div>
          <van-divider class="divider" />
        </div>
      </van-list>
    </div>-->
  </div>
</template>

<script>
import moment from 'moment'
import { getCoursetable } from '@/api/mine/class-schedule'
// import { getGoodsLists } from '@/api/home/product-list'
export default {
  data() {
    return {
      isShowCalendar: true,
      hotGoodsList: [],
      total1: 1,
      loading: false,
      finished: false,
      queryParams1: {
        page: 1,
        size: 10
      },
      queryParams: {
        cate_id: 2,
        date: null
      },
      list: [],
      total: 0
    }
  },

  computed: {
    profileList() {
      return this.$store.getters.profileList
    },
    share_token() {
      return this.$store.getters.share_token
    }
  },

  mounted() {
    this.queryParams.subject_id = this.profileList.profile.subject_id
    // this.fetchList()
  },

  methods: {
    // 初始化数据
    // fetchList() {
    //   getGoodsLists().then(res => {
    //     this.hotGoodsList = res.data.list
    //   })
    // },
    // async onLoad() {
    //   this.loading = true
    //   await getGoodsLists(this.queryParams1).then(res => {
    //     this.hotGoodsList = this.hotGoodsList.concat(res.data.list)
    //     this.queryParams1.page = this.queryParams1.page + 1
    //     this.total1 = res.data.total
    //   })
    //   this.loading = false
    //   if (this.hotGoodsList.length >= this.total1) {
    //     this.finished = true
    //   }
    // },
    // 预习课件
    toPreviewUrl(url) {
      const a = document.createElement('a')
      a.href = url
      a.click()
    },
    // 日期改变
    calendarChange(value) {
      this.queryParams.date = value
      getCoursetable(this.queryParams).then(res => {
        this.list = res.data.list
        this.total = this.list.length
        this.list.map(b => {
          b.beg_time = moment(b.beg_time * 1000).format('HH:mm')
        })
      })
    },
    topackDetails2(row) {
      const data = {
        id: row.id,
        token: this.share_token
      }
      this.$router.push({ path: '/pack-details', query: data })
    },
    parseStatus(status) {
      switch (status) {
        case 0:
          return '未开始'
        case 1:
          return '直播中'
        case 2:
          return '回放'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
h3 {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
}
.zhibo {
  height: 100px;
  padding: 15px;
  margin-bottom: 15px;
  background: #ffffff;
  box-shadow: 0px 2px 4px 0px rgba(210, 212, 213, 0.47);
  border-radius: 3px;
  h3 {
    margin: 8px 0;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    line-height: 21px;
  }
  .time {
    font-size: 12px;
    font-weight: bold;
    color: #21adb2;
    i {
      display: inline-block;
      width: 7px;
      height: 7px;
      margin-right: 5px;
      background: #21adb2;
      border-radius: 50%;
    }
    span {
      // display: inline-block;
      float: right;
      width: 54px;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      color: #ffffff;
      font-weight: 400;
      text-align: center;
      // background: url('../../../assets/img/schedule_statue.png');
      background-size: 100% 100%;
    }
  }
  .teacher {
    display: flex;
    justify-content: space-between;
    .collapse_button {
      margin-left: 5px;
      float: right;
      // width: 65px;
      height: 21px;
      background: #11a8a4;
      border-radius: 11px;
      font-size: 12px;
      font-weight: 500;
      color: #ffffff;
    }
  }
}

.headline_three {
  margin: 15px;
  // padding: 10px 10px 15px;
  .banxing {
    display: flex;
    .imgs {
      margin-right: 9px;
      img {
        width: 150px;
        height: 90px;
        border-radius: 5px;
        overflow: hidden;
      }
    }
  }
  .divider {
    margin: 15px 0px;
  }
  .banxing_title {
    height: 40px;
    font-size: 15px;
    font-weight: bold;
    color: #333333;
    line-height: 21px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .banxing_button {
    // margin: 4px 0;
    font-size: 12px;
    font-weight: 500;
    color: #009697;
    span {
      display: inline-block;
      font-size: 14px;
      font-weight: 800;
      color: #009697;
      line-height: 30px;
    }
  }
  .banxing_zhixun {
    font-size: 12px;
    font-weight: 500;
    color: #999999;
    line-height: 30px;
    span {
      font-size: 12px;
      font-weight: 500;
      text-decoration: line-through;
      color: #999999;
      line-height: 30px;
    }
  }
}
.headline_three_banxing:last-child .divider {
  display: none;
}
</style>
